<#import "common/layout.ftl" as layout/>
<#import "common/dataTables.ftl" as dataTables/>
<#import "common/modern-forms.ftl" as mform/>
<#import "common/modal.ftl" as modal/>
<!DOCTYPE html>
<html>

<@layout.head title="首页">
    <@dataTables.head/>
    <@dataTables.buttons_head/>
    <@dataTables.select_head/>
    <@dataTables.fixedHeader_head/>
    <@mform.head/>
    <@select.head/>

<link rel="stylesheet" type="text/css" href="${request.contextPath}/assets/user/skinD/css/page/main.css?v=3653060703">

<style>
    #warehouseInfo {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    #warehouseInfo .warehouse {
        flex: 1;
        position: relative;
        height: 60px;
        margin: 10px;
        max-width: 20%;
        min-width: 200px;
        color: #fff;
        line-height: 2em;
        text-shadow: 1px 1px 1px #4d83ad;
        border-radius: 5px;
        overflow: hidden;
    }
    #warehouseInfo .a{
        position: absolute;left:2px;top:2px;height:calc( 100% - 4px );
        border-radius: 5px;
        background: linear-gradient(45deg, #1281fb, rgba(18, 129, 251, 0.15));
    }
    #warehouseInfo .b{
        position: absolute;left:2px;top:2px;height:calc( 100% - 4px );
        border-radius: 5px;
        background: linear-gradient(45deg, #ff5595, rgba(255, 85, 149, 0.14));
    }
    .warehouse #name {
        position: absolute;
        font-size: 16px;
        font-weight: 800;
        top:10px;
        left:10px;
        line-height: 40px;
    }

    .warehouse #count {
        position: absolute;
        font-size: 16px;
        font-weight: 800;
        top:10px;
        right:10px;
    }

    .warehouse #warnCount {
        position: absolute;
        font-size: 12px;
        font-weight: 800;
        top:30px;
        right:10px;
    }
</style>
</@layout.head>
<body>
<@layout.page>
<div class="main-box">
    <div class="content">
        <div id="topBg" style="width:574px;">
            <div id="top" style="display:flex;background-size:45%">
                <div id="headImg">
                    <img src="${request.contextPath}/assets/user/images/${systemIcon}" width="100%"/>
                </div>
                <#--<div class="moreLink" id="equipmentSearch" style="right: 10px;"><span class="fa fa-search"> 查询</span></div>-->
                <div id="workCount" style="flex:1">
                    <div class="workSpan" id="workSpanA"><span class="num">10</span><span class="name">维修中的</span></div>
                    <div class="workSpan" id="workSpanB"><span class="num">10</span><span class="name">库存不足</span></div>
                    <div class="workSpan" id="workSpanC"><span class="num">10</span><span class="name">我要审核</span></div>
                    <div class="workSpan" id="workSpanD"><span class="num">10</span><span class="name">我要维修</span></div>
                    <div class="workSpan" id="workSpanE"><span class="num">10</span><span class="name">申请领用</span></div>
                    <div class="workSpan" id="workSpanF"><span class="num">10</span><span class="name">修理任务</span></div>
                </div>
            </div>
        </div>
        <div style="position: relative;top:5px;">
            <@dataTables.commonTable id="mainTable"/>
        </div>
        <div id="searchGroup" class="btn-group" style="position: absolute;top:120px;left:30px;">
            <div style="float: left">
                <select id='useOrgId' onchange='useOrgIdChange()' style='width:300px;'>
                    <option value='0'>请选择机构</option>
                </select>
            </div>
            <div style="float: left">
                <select id='useStaffId' style='width:200px;'>
                    <option value='0'>请选择人员</option>
                </select>
            </div>
            <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" style="margin-left: 5px;"
                    onclick="javascript:refreshData();">
                <i class="fa fa-search"></i> 查询资产
            </button>
        </div>
        <div id="searchGroup" class="btn-group" style="position: relative;top:0px;left:0px;">
            <div style="float: left">
                <select id='orgId' onchange='orgIdChange()' style='width:300px;'>
                    <option value='0'>请选择机构</option>
                </select>
            </div>
            <div style="float: left">
                <select id='warehouseId' style='width:200px;'>
                    <option value='0'>请选择机构</option>
                </select>
            </div>
            <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" style="margin-left: 5px;"
                    onclick="javascript:refreshData1();">
                <i class="fa fa-search"></i> 查询库存
            </button>
        </div>
        <div id="warehouseInfo">
        </div>
    </div>
</div>

</@layout.page>
<@layout.foot>
    <@dataTables.foot/>
    <@dataTables.buttons_foot/>
    <@dataTables.select_foot/>
    <@dataTables.fixedHeader_foot/>
    <@mform.foot/>
<script src="${request.contextPath}/assets/js/jquery.serializejson.min.js?v=3653060703"></script>
<script type="text/javascript">
    var secrecyMap = {
        <#list secrecy as item>
            "${item.code}": "${item.name}",
        </#list>}
    var orgInfo =${organizationName};
    var orgInfoForWarehouse =${organizationNameForWarehouse};
    putOptions($("#useOrgId"), "", orgInfo.list);
    putOptions($("#orgId"), "", orgInfoForWarehouse.list);
    $("#equipmentSearch").on("click", function () {
        window.location.href = "/search/#";
    })
    function putOptions(orgSelect, supername, list) {
        if (supername != "") supername = supername + "-";
        for (var i = 0; i < list.length; i++) {
            orgSelect.append("<option value=" + list[i].id + ">" + supername + list[i].name + "</option>")
            if (list[i].childrenOrg.length > 0) {
                putOptions(orgSelect, supername + list[i].name, list[i].childrenOrg);
            }
        }
    }

    function useOrgIdChange(initValue) {
        var orgId = $("#useOrgId").val();
        getStaffList(orgId, "useStaffId", initValue);
    }

    // 人员名单查询
    function getStaffList(superOrgId, showSelectId, initValue) {
        $.ajax({
            type: 'POST',
            data: {
                datas: JSON.stringify({
                    organizationId: superOrgId
                })
            },
            url: "${request.contextPath}/cust/staff/queryList",
            success: function (data) {
                var data = data.datas;
                //成功之后
                var select = $("#" + showSelectId);
                select.html("<option value=0>选择人员</option>");
                if (data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        select.append("<option value='" + data[i].id + "' " + ((initValue != null && initValue == data[i].id) ? " selected='selected' " : "") + ">" + data[i].name + "[" + data[i].telephone + "]</option>");
                    }
                }
            },
            error: function (xhr, type) {
                swal("错误", "系统发生内部错误!请稍后再试!", "error");
            }
        });
    }

    function orgIdChange(initValue) {
        var orgId = $("#orgId").val();
        refreshWarehouse(orgId);
    }

    // 仓库查询
    function refreshWarehouse(warehouseBoxId) {
        $.ajax({
            type: 'POST',
            data: {
                datas: JSON.stringify({
                    organization: warehouseBoxId
                })
            },
            url: "${request.contextPath}/base/warehouse/queryList",
            success: function (data) {
                var data = data.datas;
                //成功之后
                var select = $("#warehouseId");
                select.html("");
                if (data.length > 0) {
                    //动态加载下拉框
                    for (var i = 0; i < data.length; i++) {
                        select.append("<option value='" + data[i].id + "'>" + data[i].orgName + "：" + data[i].name + "</option>");
                    }
                }
                refreshData1();
            },
            error: function (xhr, type) {
                swal("错误", "系统发生内部错误!请稍后再试!", "error");
            }
        });
    }

    var mainTable = $('#mainTable').winningTable({
        columns: [
            {"sWidth": "40px", "title": "id", "data": "id"},
            {"sWidth": "100px", "title": "机构名称", "data": "organizationName"},
            {"sWidth": "120px", "title": "资产名称", "data": "name"},
            {"sWidth": "120px", "title": "资产条形码", "data": "barCode"},
            {"sWidth": "120px", "title": "使用位置", "data": "usePosition"},
            {"sWidth": "120px", "title": "二维码", "data": "QRcode"},
            {"sWidth": "80px", "title": "领用时间", "data": "buyTime"},
            {"sWidth": "80px", "title": "密保级别", "data": "secrecy"},
            {"sWidth": "80px", "title": "新增时间", "data": "createTime"}
        ],
        pageLength: 10,
        fixedHeader: false,
        searching: true,
        ordering: true,
        "order": [[8, "desc"]],
        "columnDefs": [{
            "targets": [0],
            "visible": false
        }],
        buttons: [

        ],
        "rowCallback": function (row, data, index) {
            $('td', row).eq(6).html(secrecyMap[data.secrecy]);
        }
    });

    function refreshData() {
        var data = {
            datas: JSON.stringify({
                type: "0",
                brand: "0",
                name: "",
                oneOrganization: $("#useOrgId").val(),
                useStaffId: $("#useStaffId").val()
            })
        }
        mainTable.queryData("${request.contextPath}/busi/equipment/use/queryList", data);
    }

    // 刷新1
    function refreshData1() {
        if ($("#orgId").val() == 0) {
            swal("错误", "请选择机构", "error");
            return;
        }

        $.ajax({
            type: 'POST',
            data: {
                datas: JSON.stringify({
                    warehouseId: getWarehouseId()
                })
            },
            url: "${request.contextPath}/busi/warehouseMain/queryEqClassList",
            success: function (data) {
                var data = data.datas;
                //成功之后
                var select = $("#warehouseInfo");
                select.html("");
                if (data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        var ab="a";
                        if(data[i].warnCount-data[i].count>=0) ab="b";
                        var percent=data[i].count/data[i].warnCount/5*100;
                        select.append(
                            " <div class=\"warehouse\" style=\"background-color: #dbecf5;\">" +
                                "<div class='"+ab+"' style=\"width:"+percent+"%;\"></div>" +
                                "<div id='name'>"+data[i].name + "</div>" +
                                "<div id='count'>当前库存："+ data[i].count + "</div>" +
                                "<div id='warnCount'>警告库存："+data[i].warnCount + "</div>" +
                             "</div>"
                        );
                    }
                }
            },
            error: function (xhr, type) {
                swal("错误", "系统发生内部错误!请稍后再试!", "error");
            }
        });
    }

    function getWarehouseId() {
        if ($("#orgId").val() == 0) {
            return null;
        } else {
            if ($("#warehouseId").length == 0) {
                return "0";
            }
            if ($("#warehouseId").val() == "0") {
                var value = "";
                for (var i = 0; i < $("#warehouseId option").length; i++) {
                    value += ("," + $("#warehouseId option").eq(i).attr("value"));
                }
                return value.substr(1);
            } else {
                return $("#warehouseId").val();
            }
        }
    }
</script>
</@layout.foot>
</body>
</html>